<template>
    <div>
        <div>
            <el-row>
                <el-col :span="4">
                    <el-input type="text" v-model="form.name" clearable placeholder="名称\关键词"></el-input>
                </el-col>
                <el-col :span="1">
                    <el-button type="success" @click="getAdList">查询</el-button>
                </el-col>
                <el-col :span="1">
                    <el-button style="margin-left: 20px" type="primary" @click="add()">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="common-data">
            <el-table :data="adList.list" style="width: 100%" border stripe>
                <el-table-column prop="id" type="index" label="编号">
                    <template slot-scope="scope">
                        <span>{{(adList.pageNum - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="广告名称"></el-table-column>
                <el-table-column prop="position" label="广告位置"></el-table-column>
                <el-table-column prop="start_time" label="开始时间"></el-table-column>
                <el-table-column prop="end_time" label="到期时间"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === '1'">正常</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status === '2'">下架</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status === '3'">已删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="image" label="图片"></el-table-column>
                <el-table-column prop="url" label="url"></el-table-column>
                <el-table-column prop="remarks" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="edit(scope.row)">编辑</el-button><br>
                        <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pageNum"
                    :page-sizes="[5,10,15,20]"
                    :page-size="this.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="this.adList.total">
                </el-pagination>
            </div>
        </div>
        <!--        新增和编辑页面-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="编号" :label-width="formLabelWidth" hidden>
                    <el-input v-model="ruleForm.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="广告名称" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="广告位置" prop="position" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.position" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="formLabelWidth">
                    <el-col :span="11">
                        <el-form-item prop="create_time">
                            <el-date-picker disabled type="date" placeholder="选择日期" v-model="ruleForm.start_time" autocomplete="off" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="到期时间" :label-width="formLabelWidth">
                    <el-col :span="11">
                        <el-form-item prop="end_time">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.end_time" autocomplete="off" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
                    <el-select v-model="ruleForm.status" placeholder="请选择状态">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="下架" value="2"></el-option>
                        <el-option label="删除" value="3"></el-option>
                    </el-select>
                    <!--                    <el-input v-model="ruleForm.status" autocomplete="off"></el-input>-->
                </el-form-item>
                <el-form-item label="图片" prop="image" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.image" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="url" prop="url" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remarks" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.remarks" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <div v-if="title==='新增'">
                    <el-button type="primary" @click="save('ruleForm')">保 存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </div>
                <div v-else>
                    <el-button type="primary" @click="update()">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Ad",
        data() {
            return {
                title:'新增',
                dialogFormVisible: false,
                form: {
                    name: '',
                },
                ruleForm: {
                    id:'',
                    name: '',
                    position: '',
                    start_time: new Date,
                    end_time: new Date,
                    status: '',
                    image: '',
                    url: '',
                    remarks: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    position: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                    start_time: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    end_time: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    image: [
                        { required: true, message: '请输入', trigger: 'change' }
                    ],
                    url: [
                        { required: true, message: '请输入', trigger: 'change' }
                    ],
                    remarks: [
                        { required: true, message: '请输入', trigger: 'change' }
                    ],
                    status: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ]
                },
                formLabelWidth: '120px',
                // 权限列表，向后台请求数据获取，看起来格式应该是这样的[{},{},{}]
                adList: {},
                // 共几页
                pageNum:'',
                // 每页显示数量
                pageSize:5,
            }
        },
        created() {
            this.getAdList();
        },
        methods: {
            // 分页列表
            getAdList(){
                // 获取列表数据
                this.$http.post('goods/ad/list',{name:this.form.name,pageNum:this.pageNum,pageSize:this.pageSize}).then(res => {
                    // 处理结果，根据自己业务接口返回结构赋值数据
                    if(res.code === 20000){
                        this.adList = res.data;
                    }
                })
            },
            // 每页条数发生变化
            handleSizeChange(newPageSize) {
                this.pageSize = newPageSize;
                this.getAdList();
            },
            // 当前页码发生变化
            handleCurrentChange(newPageNum) {
                console.log('当前页码:',newPageNum);
                this.pageNum=newPageNum
                this.getAdList();
            },
            add(){
                this.dialogFormVisible=true;
                this.title="新增";
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 新增商品信息
            save(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post("goods/ad/save",this.ruleForm).then(response=>{
                            if(response.code === 20000){
                                this.$notify({
                                    title: '成功',
                                    message: '新增成功',
                                    type: 'success'
                                });
                                location.reload();
                            }else{
                                this.$notify.error({
                                    title: '失败',
                                    message: '新增失败',
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            edit(row){
                this.dialogFormVisible=true;
                this.title="编辑信息"
                this.ruleForm=row;
            },
            // 修改商品信息
            update() {
                this.$http.post("goods/ad/edit", this.ruleForm).then(response => {
                    if (response.code === 20000) {
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success'
                        });
                        location.reload();
                    } else {
                        this.$notify.error({
                            title: '失败',
                            message: '修改失败',
                        });
                    }
                })
            },
            del(row) {
                this.$http.post("goods/ad/del", {id: row.id}).then(response => {
                    if (response.code === 20000) {
                        this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success'
                        });
                        location.reload();
                    } else {
                        this.$notify.error({
                            title: '失败',
                            message: '删除失败',
                        });
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
